<template lang="">
  <view class="_wrapper-x _flex _flex-end _m-b-10 _flex-space-x">
    <div class="_m-l-5">
      <com-datetime-select
        v-model:startTime="datetime.start"
        v-model:endTime="datetime.end"
      ></com-datetime-select>
    </div>
    <template v-for="item in queryParams" :key="item.name">
      <div
        class="_m-l-5 _box-x-100p"
        v-if="item.dictList && item.dictList.length > 0"
      >
        <com-select :dictList="item.dictList" v-model="item.val"></com-select>
      </div>
      <div class="_m-l-5 _box-x-100p" v-else>
        <el-input
          v-model="item.val"
          @keydown.enter="search()"
          :placeholder="`请输入${item.memo || '内容'}`"
        ></el-input>
      </div>
    </template>
    <div>
      <el-button @click="search()" type="primary" circle>
        <el-icon><Search /></el-icon>
      </el-button>
    </div>
    <div>
      <el-button @click="add()" type="primary" circle>
        <el-icon><Plus /></el-icon>
      </el-button>
    </div>
    <div>
      <el-button @click="remove()" type="danger" circle>
        <el-icon><Delete /></el-icon>
      </el-button>
    </div>
    <!-- <ComExcelExport :exportExcelData="dataList" :fields="exportFields" /> -->
  </view>
</template>
<script>
import ComSelect from "@/components/com-select/com-select.vue";
import ComDatetimeSelect from "@/components/com-datetime-select/com-datetime-select.vue";

export default {
  components: { ComSelect, ComDatetimeSelect },
  props: {
    queryParams: {
      type: Array,
      default: () => {
        return [
          // { name: "name", type: "eq", val: "", dictList: [], memo: "名称" },
        ];
      },
    },
  },
  data() {
    return {
      datetime: {
        start: "",
        end: "",
      },
    };
  },
  mounted() {},
  methods: {
    search() {
      this.$emit("search", this.rules());
    },
    add() {
      this.$emit("add", this.queryParams);
    },
    remove() {
      this.$emit("remove", this.queryParams);
    },
    rules() {
      let rules = {};
      this.queryParams.forEach((element) => {
        if (element.val || element.val == 0) {
          rules[`${element.name}__${element.type}`] = element.val;
        }
      });
      if (this.datetime.start) {
        rules[`created_date__ge`] = this.datetime.start;
      }
      if (this.datetime.end) {
        rules[`created_date__le`] = this.datetime.end;
      }
      return rules;
    },
  },
};
</script>
<style lang=""></style>
